<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./elementui/vue.min.js"></script>
    <link rel="stylesheet" href="./elementui/index.css">
    <script src="./elementui/index.js"></script>
    <!--    <script src="./node_modules/downloadjs/download.min.js"></script>-->

</head>
<body>
<div id="app">

    <div class="index">
        <el-container>
            <el-table
                    :data="tableData"
                    id="taskTable"
                    style="width: 100%">
                <el-table-column v-for="(item) in tableColumnData"
                                 :prop="item.prop"
                                 :label="item.label"
                                 sortable
                                 width="180">
                </el-table-column>

            </el-table>
        </el-container>

        <svg t="1717404991470" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="834" width="200" height="200"><path d="M738.8672 928.3072H286.4128c-106.4448 0-193.024-86.5792-193.024-193.024V285.1328c0-106.4448 86.5792-193.024 193.024-193.024h452.4544c106.4448 0 193.024 86.5792 193.024 193.024v450.0992c0 106.496-86.5792 193.0752-193.024 193.0752zM286.4128 163.7888c-66.9184 0-121.344 54.4256-121.344 121.344v450.0992c0 66.9184 54.4256 121.344 121.344 121.344h452.4544c66.9184 0 121.344-54.4256 121.344-121.344V285.1328c0-66.9184-54.4256-121.344-121.344-121.344H286.4128z" fill="#434A54" p-id="835"></path><path d="M361.984 731.2384c-19.8144 0-35.84-16.0256-35.84-35.84V490.9056c0-19.8144 16.0256-35.84 35.84-35.84s35.84 16.0256 35.84 35.84v204.4928c0 19.7632-16.0768 35.84-35.84 35.84zM669.4912 731.2384c-19.8144 0-35.84-16.0256-35.84-35.84V490.9056c0-19.8144 16.0256-35.84 35.84-35.84s35.84 16.0256 35.84 35.84v204.4928c0 19.7632-16.0768 35.84-35.84 35.84zM516.5056 733.5424c-19.8144 0-35.84-16.0256-35.84-35.84V324.6592c0-19.8144 16.0256-35.84 35.84-35.84s35.84 16.0256 35.84 35.84v373.0944c0 19.7632-16.0256 35.7888-35.84 35.7888z" fill="#FF9797" p-id="836"></path></svg>
        <download-excel :data='tableData' :fields='json_fields' name='导出文件.xlsx'>
            <el-button type='primary'>导出2</el-button>
        </download-excel>

        <el-button @click="me" type='primary'>按钮</el-button>

    </div>


</div>

<script type="module">
    // import  json from "vue-json-excel"
    import JsonExcel from './node_modules/vue-json-excel/dist/vue-json-excel.esm.js'

    Vue.component('download-excel', JsonExcel);

    new Vue({
        el: "#app",
        data() {
            return {
                excelpage: [],
                /*json_fields: {
                    "日期1": "date",
                    "名字": "name",
                    "地址": "address",
                    "排序": "sort"
                },
*/
                json_fields: {
                    "日期1": "date",
                    "名字": "name",
                    "地址": "address",
                    "排序": {
                        field: "sort",
                        type: "string",
                        callback: (value) => {
                            return "" + value;
                        },
                    },
                },
                tableColumnData: [
                    {label: "日期", prop: "date"},
                    {label: "名字", prop: "name"},
                    {label: "地址", prop: "address"}
                ],
                tableData:
                    [{
                        date: '2016-05-02',
                        name: '1王小虎',
                        address: '上海市普陀区金沙江路 1518 弄',
                        sort: '002'
                    }, {
                        date: '2016-05-04',
                        name: '2王小虎',
                        address: '上海市普陀区金沙江路 1517 弄',
                        sort: '007'

                    }, {
                        date: '2016-05-01',
                        name: '3王小虎',
                        address: '上海市普陀区金沙江路 1519 弄',
                        sort: '001'
                    }, {
                        date: '2016-05-03',
                        name: '4王小虎',
                        address: '上海市普陀区金沙江路 1516 弄',
                        sort: '002'
                    }]
            }
        },
        methods: {
            me() {
                console.log(JsonExcel)
            }
        }
    })
</script>
</body>
</html>
